<template>
    <div class="page-container">
        <!-- Nav Tabs -->
        <div class="nav-card">
            <div class="nav-tabs">
                <router-link
                    to="/home/notification/all"
                    class="nav-tab"
                    :class="{ active: activeTab === 'all' }"
                    @click="changeTab('all')"
                >
                    所有通知
                </router-link>
                <router-link
                    to="/home/notification/active"
                    class="nav-tab"
                    :class="{ active: activeTab === 'active' }"
                    @click="changeTab('active')"
                >
                    生效通知
                </router-link>
                <router-link
                    to="/home/notification/expired"
                    class="nav-tab"
                    :class="{ active: activeTab === 'expired' }"
                    @click="changeTab('expired')"
                >
                    过期通知
                </router-link>
                <router-link
                    to="/home/notification/draft"
                    class="nav-tab"
                    :class="{ active: activeTab === 'draft' }"
                    @click="changeTab('draft')"
                >
                    草稿箱
                </router-link>
            </div>
        </div>

        <!-- Filter Section (Search Card) -->
        <div class="search-card">
            <div class="card-header">
                <span class="card-title">查询条件</span>
            </div>
            <div class="search-section">
                <el-form :inline="true" :model="searchParams" class="query-form">
                    <el-form-item label="通知标题">
                        <el-input
                            v-model="searchParams.title"
                            placeholder="请输入通知标题"
                            class="custom-input"
                            style="width: 200px"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="是否重要">
                        <el-select
                            v-model="searchParams.isImportant"
                            placeholder="请选择"
                            clearable
                            class="custom-select"
                            style="width: 120px"
                        >
                            <el-option label="普通" value="0" />
                            <el-option label="重要" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="消息状态">
                        <el-select
                            v-model="searchParams.noticeStatus"
                            placeholder="请选择"
                            clearable
                            class="custom-select"
                            style="width: 140px"
                        >
                            <el-option label="全部可见" value="1" />
                            <el-option label="企业可见" value="2" />
                            <el-option label="市可见" value="3" />
                            <el-option label="省可见" value="4" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发布人">
                        <el-input
                            v-model="searchParams.publisherFuzzy"
                            placeholder="请输入发布人"
                            class="custom-input"
                            style="width: 150px"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="生效时间范围" v-if="activeTab === 'all'">
                        <el-date-picker
                            v-model="searchParams.dateRange"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="YYYY-MM-DD"
                            class="custom-input"
                            style="width: 240px"
                        />
                    </el-form-item>
                    <div class="form-actions">
                        <el-button @click="resetSearch" class="btn-secondary" round>重置</el-button>
                        <el-button
                            type="primary"
                            @click="handleSearch"
                            class="btn-primary-theme"
                            round
                        >
                            <el-icon class="mr-1"><Search /></el-icon>搜索
                        </el-button>
                        <el-button
                            type="primary"
                            @click="addNotice"
                            class="btn-primary-theme"
                            round
                        >
                            <el-icon class="mr-1"><Plus /></el-icon>添加通知
                        </el-button>
                    </div>
                </el-form>
            </div>
        </div>

        <!-- Table Section (Table Card) -->
        <div class="table-card">
            <div class="card-header">
                <span class="card-title">通知列表</span>
                <span class="section-subtitle"
                    >共 <span class="highlight-num">{{ pagination.total }}</span> 条通知</span
                >
            </div>

            <el-table
                v-loading="loading"
                :data="noticeList"
                style="width: 100%"
                class="modern-table"
                row-key="noticeId"
                :header-cell-style="{
                    background: '#f8fafc',
                    color: '#475569',
                    fontWeight: '700',
                    fontSize: '13px',
                    height: '56px',
                    textAlign: 'center',
                }"
                :cell-style="{ textAlign: 'center', padding: '12px 0' }"
            >
                <el-table-column prop="title" label="通知标题" min-width="220" align="left">
                    <template #default="{ row }">
                        <div class="title-cell">
                            <span
                                class="cell-primary-text"
                                :class="{ 'important-text': row.isImportant === 1 }"
                            >
                                {{ row.title }}
                            </span>
                            <el-tag
                                v-if="row.isImportant === 1"
                                type="danger"
                                effect="dark"
                                size="small"
                                round
                                class="ml-2"
                                >重要</el-tag
                            >
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="noticeStatus" label="可见范围" width="120" align="center">
                    <template #default="{ row }">
                        <el-tag :type="getNoticeStatusType(row.noticeStatus)" effect="light" round>
                            {{ getNoticeStatusName(row.noticeStatus) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="publisher" label="发布人" width="120" align="center" />
                <el-table-column prop="publishTime" label="发布时间" width="180" align="center">
                    <template #default="{ row }">
                        <span class="timestamp-text">{{ formatDate(row.publishTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="startTime" label="生效时间" width="300" align="center">
                    <template #default="{ row }">
                        <span class="timestamp-text"
                            >{{ formatDate(row.startTime) }} - {{ formatDate(row.endTime) }}</span
                        >
                    </template>
                </el-table-column>
                <el-table-column prop="readCount" label="阅读" width="80" align="center">
                    <template #default="{ row }">
                        <span class="cell-text">{{ row.readCount }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100" align="center">
                    <template #default="{ row }">
                        <div class="status-badge" :class="`status-${getStatusType(row.status)}`">
                            <span class="status-dot"></span>
                            {{ getStatusName(row.status) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="240" fixed="right" align="center">
                    <template #default="scope">
                        <div class="action-group">
                            <el-button
                                size="small"
                                link
                                type="primary"
                                class="action-btn"
                                @click="viewNoticeDetail(scope.row.noticeId)"
                            >
                                查看
                            </el-button>
                            <div class="divider"></div>
                            <el-button
                                size="small"
                                link
                                type="primary"
                                class="action-btn"
                                @click="editNotice(scope.row)"
                                :disabled="scope.row.status === 0"
                            >
                                编辑
                            </el-button>
                            <div class="divider"></div>
                            <el-button
                                size="small"
                                link
                                type="danger"
                                class="action-btn danger"
                                @click="deleteNotice(scope.row.noticeId)"
                                :disabled="scope.row.status === 0"
                            >
                                删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-wrapper">
                <el-pagination
                    v-model:current-page="pagination.page"
                    v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>

        <!-- 通知详情对话框 -->
        <el-dialog
            v-model="showDetailDialog"
            title="通知详情"
            width="700px"
            class="custom-dialog"
            align-center
            destroy-on-close
        >
            <div v-if="currentNotice" class="notice-detail">
                <div class="detail-header">
                    <h3
                        class="detail-title"
                        :class="{ 'important-title': currentNotice.isImportant === 1 }"
                    >
                        {{ currentNotice.title }}
                    </h3>
                    <div class="detail-meta-row">
                        <el-tag size="small" effect="plain" round>{{
                            currentNotice.publisher
                        }}</el-tag>
                        <span class="meta-text">{{ formatDate(currentNotice.publishTime) }}</span>
                        <span class="meta-text">阅读: {{ currentNotice.readCount }}</span>
                        <el-tag
                            v-if="currentNotice.isImportant === 1"
                            type="danger"
                            size="small"
                            effect="dark"
                            round
                            >重要</el-tag
                        >
                    </div>
                </div>
                <div class="detail-content">
                    <div v-html="currentNotice.content"></div>
                </div>
                <div v-if="currentNotice.attachment" class="detail-attachment">
                    <el-divider content-position="left">附件下载</el-divider>
                    <el-link
                        type="primary"
                        :href="currentNotice.attachment"
                        target="_blank"
                        class="attachment-link"
                    >
                        <el-icon class="mr-1"><Download /></el-icon>
                        {{ currentNotice.attachmentName || '下载附件' }}
                    </el-link>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showDetailDialog = false" class="btn-secondary"
                        >关闭</el-button
                    >
                </div>
            </template>
        </el-dialog>

        <!-- 通知表单对话框 -->
        <el-dialog
            v-model="showNoticeForm"
            :title="editMode ? '编辑通知' : '添加通知'"
            width="800px"
            class="custom-dialog"
            align-center
            destroy-on-close
            @close="resetNoticeForm"
        >
            <el-form
                ref="noticeFormRef"
                :model="noticeForm"
                :rules="formRules"
                label-position="top"
                class="modern-form"
            >
                <el-form-item label="通知标题" prop="title">
                    <el-input
                        v-model="noticeForm.title"
                        placeholder="请输入通知标题"
                        maxlength="200"
                        class="custom-input"
                    />
                </el-form-item>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="是否重要" prop="isImportant">
                            <el-radio-group v-model="noticeForm.isImportant" class="custom-radio">
                                <el-radio :label="0">普通</el-radio>
                                <el-radio :label="1">重要</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="可见范围" prop="noticeStatus">
                            <el-select
                                v-model="noticeForm.noticeStatus"
                                class="custom-select"
                                style="width: 100%"
                            >
                                <el-option :value="1" label="全部人可见" />
                                <el-option :value="2" label="企业可见" />
                                <el-option :value="3" label="市可见" />
                                <el-option :value="4" label="省可见" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="生效开始时间" prop="startTime">
                            <el-date-picker
                                v-model="noticeForm.startTime"
                                type="datetime"
                                placeholder="请选择开始时间"
                                format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                class="custom-input"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="生效结束时间" prop="endTime">
                            <el-date-picker
                                v-model="noticeForm.endTime"
                                type="datetime"
                                placeholder="请选择结束时间"
                                format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                class="custom-input"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="通知内容" prop="content">
                    <el-input
                        v-model="noticeForm.content"
                        type="textarea"
                        placeholder="请输入通知内容"
                        :rows="6"
                        class="custom-input"
                    />
                </el-form-item>

                <el-form-item label="发布状态" prop="status">
                    <el-radio-group v-model="noticeForm.status" class="custom-radio">
                        <el-radio :label="1">立即发布</el-radio>
                        <el-radio :label="2">保存草稿</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showNoticeForm = false" class="btn-secondary"
                        >取消</el-button
                    >
                    <el-button type="primary" @click="submitNotice" class="btn-primary-theme"
                        >保存</el-button
                    >
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import {
    ElCard,
    ElAlert,
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
    ElTable,
    ElTableColumn,
    ElPagination,
    ElDialog,
    ElTag,
    ElSelect,
    ElOption,
    ElDatePicker,
    ElRadio,
    ElRadioGroup,
    ElUpload,
    ElLink,
    ElDivider,
    ElMessage,
    ElMessageBox,
} from 'element-plus';
import { Plus, Download, Upload, Search } from '@element-plus/icons-vue';
import noticeApi from '@/api/notice.js';

// 路由相关
const route = useRoute();

// 标签页相关
const activeTab = ref('all');

// 加载状态
const loading = ref(false);

// 通知列表数据
const noticeList = ref([]);

// 分页信息
const pagination = reactive({
    page: 1,
    pageSize: 10,
    total: 0,
});

// 搜索参数
const searchParams = reactive({
    title: '',
    isImportant: '',
    noticeStatus: '',
    publisherFuzzy: '',
    dateRange: null,
});

// 详情对话框
const showDetailDialog = ref(false);
const currentNotice = ref(null);

// 表单对话框
const showNoticeForm = ref(false);
const editMode = ref(false);
const noticeFormRef = ref();
const noticeForm = reactive({
    noticeId: '',
    title: '',
    content: '',
    attachment: '',
    attachmentName: '',
    isImportant: 0,
    noticeStatus: 1,
    publisherFuzzy: '',
    startTime: '',
    endTime: '',
    status: 1,
});

// 文件列表
const fileList = ref([]);

// 表单验证规则
const formRules = reactive({
    title: [
        { required: true, message: '请输入通知标题', trigger: 'blur' },
        { max: 200, message: '标题长度不能超过200个字符', trigger: 'blur' },
    ],
    content: [{ required: true, message: '请输入通知内容', trigger: 'blur' }],
    startTime: [{ required: true, message: '请选择生效开始时间', trigger: 'change' }],
    endTime: [{ required: true, message: '请选择生效结束时间', trigger: 'change' }],
});

// 切换标签页
const changeTab = (tab) => {
    activeTab.value = tab;
    pagination.page = 1;
    fetchNoticeList();
};

// 获取通知列表
const fetchNoticeList = async () => {
    loading.value = true;
    try {
        const params = {
            page: pagination.page,
            pageSize: pagination.pageSize,
            title: searchParams.title,
            isImportant: searchParams.isImportant,
            noticeStatus: searchParams.noticeStatus,
            publisherFuzzy: searchParams.publisherFuzzy,
            status: activeTab.value === 'draft' ? 2 : null,
            timeStatus: null,
        };

        if (activeTab.value === 'active') {
            params.timeStatus = 1; // 生效中
        } else if (activeTab.value === 'expired') {
            params.timeStatus = 2; // 已过期
        }

        // 处理时间范围
        if (searchParams.dateRange) {
            params.startTime = searchParams.dateRange[0];
            params.endTime = searchParams.dateRange[1];
        }

        let response = await noticeApi.getNoticeList(params);

        if (response.code === 200) {
            noticeList.value = response.data.list || [];
            pagination.total = response.data.totalCount || 0;
        }
    } catch (error) {
        console.error('获取通知列表失败:', error);
    } finally {
        loading.value = false;
    }
};

// 搜索
const handleSearch = () => {
    pagination.page = 1;
    fetchNoticeList();
};

// 重置搜索
const resetSearch = () => {
    Object.assign(searchParams, {
        title: '',
        isImportant: '',
        noticeStatus: '',
        publisher: '',
        dateRange: null,
    });
    pagination.page = 1;
    fetchNoticeList();
};

// 分页处理
const handleSizeChange = (size) => {
    pagination.pageSize = size;
    fetchNoticeList();
};

const handleCurrentChange = (current) => {
    pagination.page = current;
    fetchNoticeList();
};

// 格式化日期
const formatDate = (date) => {
    if (!date) return '';
    const d = new Date(date);
    return d.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
    });
};

// 获取通知状态类型
const getNoticeStatusType = (status) => {
    const typeMap = {
        1: 'success',
        2: 'primary',
        3: 'warning',
        4: 'info',
    };
    return typeMap[status] || 'info';
};

// 获取通知状态名称
const getNoticeStatusName = (status) => {
    const nameMap = {
        1: '全部可见',
        2: '企业可见',
        3: '市可见',
        4: '省可见',
    };
    return nameMap[status] || '未知';
};

// 获取状态类型
const getStatusType = (status) => {
    const typeMap = {
        0: 'danger',
        1: 'success',
        2: 'warning',
    };
    return typeMap[status] || 'info';
};

// 获取状态名称
const getStatusName = (status) => {
    const nameMap = {
        0: '已删除',
        1: '正常',
        2: '草稿',
    };
    return nameMap[status] || '未知';
};

// 查看通知详情
const viewNoticeDetail = async (noticeId) => {
    try {
        const response = await noticeApi.getNoticeDetail(noticeId);
        if (response.code === 200) {
            currentNotice.value = response.data;
            showDetailDialog.value = true;
        }
    } catch (error) {
        console.error('获取通知详情失败:', error);
    }
};

// 添加通知
const addNotice = () => {
    resetNoticeForm();
    editMode.value = false;
    showNoticeForm.value = true;
};

// 编辑通知
const editNotice = (notice) => {
    resetNoticeForm();
    editMode.value = true;
    Object.assign(noticeForm, notice);
    // 重置文件列表
    fileList.value = [];
    if (notice.attachment && notice.attachmentName) {
        fileList.value = [
            {
                name: notice.attachmentName,
                url: notice.attachment,
            },
        ];
    }
    showNoticeForm.value = true;
};

// 重置通知表单
const resetNoticeForm = () => {
    editMode.value = false;
    if (noticeFormRef.value) {
        noticeFormRef.value.resetFields();
    }
    Object.assign(noticeForm, {
        noticeId: '',
        title: '',
        content: '',
        attachment: '',
        attachmentName: '',
        isImportant: 0,
        noticeStatus: 1,
        publisher: '',
        startTime: '',
        endTime: '',
        status: 1,
    });
    fileList.value = [];
};

// 删除通知
const deleteNotice = async (noticeId) => {
    try {
        await ElMessageBox.confirm('确定要删除这条通知吗？删除后将无法恢复。', '删除确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            customClass: 'custom-message-box',
            confirmButtonClass: 'btn-danger-theme',
            cancelButtonClass: 'btn-secondary',
        });

        const response = await noticeApi.deleteNotice(noticeId);
        if (response.code === 200) {
            ElMessage.success('删除成功');
            fetchNoticeList();
        }
    } catch (error) {
        if (error !== 'cancel') {
            console.error('删除通知失败:', error);
        }
    }
};

// 处理文件变化
const handleFileChange = (file, fileList) => {
    if (fileList.length > 1) {
        fileList.shift();
    }
};

// 处理文件删除
const handleFileRemove = () => {
    noticeForm.attachment = '';
    noticeForm.attachmentName = '';
};

// 提交通知
const submitNotice = async () => {
    if (!noticeFormRef.value) return;

    try {
        await noticeFormRef.value.validate();

        if (fileList.value.length > 0 && fileList.value[0].raw) {
            const formData = new FormData();
            formData.append('file', fileList.value[0].raw);
            const uploadResponse = await noticeApi.uploadAttachment(formData);
            if (uploadResponse.code === 200) {
                noticeForm.attachment = uploadResponse.data.filePath;
                noticeForm.attachmentName = uploadResponse.data.fileName;
            }
        }

        let response;
        if (editMode.value) {
            response = await noticeApi.updateNotice(noticeForm);
        } else {
            noticeForm.publisher = '省级管理员';
            response = await noticeApi.addNotice(noticeForm);
        }

        if (response.code === 200) {
            ElMessage.success(editMode.value ? '更新成功' : '添加成功');
            showNoticeForm.value = false;
            fetchNoticeList();
        }
    } catch (error) {
        console.error(editMode.value ? '更新通知失败' : '添加通知失败', error);
    }
};

const updateActiveTabFromRoute = () => {
    const path = route.path;
    if (path.includes('/notification/all')) {
        activeTab.value = 'all';
    } else if (path.includes('/notification/active')) {
        activeTab.value = 'active';
    } else if (path.includes('/notification/expired')) {
        activeTab.value = 'expired';
    } else if (path.includes('/notification/draft')) {
        activeTab.value = 'draft';
    }
};

watch(
    () => route.path,
    () => {
        updateActiveTabFromRoute();
        pagination.page = 1;
    }
);

onMounted(() => {
    updateActiveTabFromRoute();
    fetchNoticeList();
});
</script>

<style scoped lang="scss">
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 24px 40px;
    // background-color: #f8fafc;
    color: #1e293b;
    font-family: 'Inter', sans-serif;
}

/* Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 40px;
    background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
    border-radius: 24px;
    color: white;
    box-shadow: 0 20px 40px -12px rgba(79, 70, 229, 0.3);
}

.page-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 8px 0;
    color: white;
}

.page-description {
    font-size: 15px;
    opacity: 0.9;
    margin: 0;
    font-weight: 400;
    color: white;
}

/* Nav Tabs */
.nav-card {
    background: white;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
    border: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-start;
}

.nav-tabs {
    display: flex;
    gap: 8px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
}

.nav-tab {
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s;

    &.active {
        background: white;
        color: #4f46e5;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    &:hover:not(.active) {
        color: #475569;
        background: rgba(255, 255, 255, 0.5);
    }
}

/* Search Card */
.search-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    margin-bottom: 24px;
    border: 1px solid rgba(241, 245, 249, 1);
    overflow: hidden;
}

.card-header {
    padding: 16px 24px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafafa;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.search-section {
    padding: 24px;
}

.query-form {
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-end;

    :deep(.el-form-item) {
        margin-bottom: 0;
        margin-right: 0;
        display: flex;
        flex-direction: column;

        .el-form-item__label {
            justify-content: flex-start;
            padding-bottom: 6px;
            font-size: 13px;
            font-weight: 600;
            color: #64748b;
        }
    }
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-left: auto;
    align-self: flex-end;
}

/* Table Card */
.table-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(241, 245, 249, 1);
    overflow: hidden;
    padding: 8px;
}

.section-subtitle {
    font-size: 13px;
    color: #64748b;

    .highlight-num {
        color: #4f46e5;
        font-weight: 700;
        font-size: 15px;
        padding: 0 2px;
    }
}

/* Modern Table */
.modern-table {
    border-radius: 16px;
    overflow: hidden;
    --el-table-border-color: #f1f5f9;
    --el-table-row-hover-bg-color: #f8fafc;
    --el-table-header-bg-color: #f8fafc;
}

.cell-primary-text {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.important-text {
    color: #f56c6c;
}

.cell-text {
    font-size: 13px;
    color: #64748b;
}

.timestamp-text {
    font-variant-numeric: tabular-nums;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
}

.title-cell {
    display: flex;
    align-items: center;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-success {
    background: #ecfdf5;
    color: #059669;
    .status-dot {
        background: #10b981;
    }
}
.status-warning {
    background: #fff7ed;
    color: #ea580c;
    .status-dot {
        background: #f97316;
    }
}
.status-danger {
    background: #fef2f2;
    color: #dc2626;
    .status-dot {
        background: #ef4444;
    }
}
.status-info {
    background: #f1f5f9;
    color: #64748b;
    .status-dot {
        background: #94a3b8;
    }
}

/* Buttons */
.btn-primary-theme {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
    transition: all 0.2s;
    font-weight: 600;

    &.small {
        padding: 6px 16px;
        font-size: 13px;
    }

    &:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
    }
}

.btn-secondary {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-weight: 500;
    border-radius: 8px;
    padding: 10px 24px;

    &:hover {
        background: #f8fafc;
        color: #1e293b;
        border-color: #cbd5e1;
    }
}

.btn-danger-theme {
    color: #ef4444;
    &:hover {
        background: #fef2f2;
    }
}

.action-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.divider {
    width: 1px;
    height: 14px;
    background: #e2e8f0;
}

.action-btn {
    font-weight: 600;
    padding: 4px 8px;
    height: auto;

    &.danger {
        color: #ef4444;
        &:hover {
            color: #dc2626;
        }
    }
}

.pagination-wrapper {
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
}

/* Inputs */
.custom-input,
.custom-select {
    :deep(.el-input__wrapper) {
        border-radius: 8px;
        box-shadow: 0 0 0 1px #e2e8f0 inset;
        padding: 6px 12px;
        &.is-focus {
            box-shadow: 0 0 0 2px #818cf8 inset;
        }
    }
}

/* Dialog */
:deep(.custom-dialog) {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    .el-dialog__header {
        margin: 0;
        padding: 20px 24px;
        border-bottom: 1px solid #f1f5f9;
        .el-dialog__title {
            font-weight: 700;
            font-size: 18px;
            color: #0f172a;
        }
    }

    .el-dialog__body {
        padding: 32px;
    }

    .el-dialog__footer {
        padding: 20px 24px;
        border-top: 1px solid #f1f5f9;
        background-color: #f8fafc;
    }
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.notice-detail {
    .detail-header {
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px dashed #e2e8f0;
    }

    .detail-title {
        font-size: 20px;
        color: #1e293b;
        margin-bottom: 12px;
        line-height: 1.4;
    }

    .detail-meta-row {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #64748b;
        font-size: 13px;
    }

    .detail-content {
        padding: 20px;
        background: #f8fafc;
        border-radius: 12px;
        color: #334155;
        line-height: 1.8;
        margin-bottom: 24px;
        border: 1px solid #f1f5f9;
    }

    .attachment-link {
        font-size: 14px;
    }
}

.modern-form {
    :deep(.el-form-item__label) {
        font-weight: 600;
        color: #475569;
        margin-bottom: 8px;
    }
}

.mr-1 {
    margin-right: 4px;
}
.ml-2 {
    margin-left: 8px;
}
</style>

<style lang="scss">
/* Global styles for ElMessageBox */
.custom-message-box {
    border-radius: 16px !important;
    overflow: hidden;
    border: none !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    padding-bottom: 20px !important;

    .el-message-box__header {
        padding: 20px 24px;
        border-bottom: 1px solid #f1f5f9;

        .el-message-box__title {
            font-weight: 700;
            color: #0f172a;
        }
    }

    .el-message-box__content {
        padding: 24px;
        color: #334155;
        font-size: 15px;
    }

    .el-message-box__btns {
        padding: 0 24px 0 0;

        .el-button {
            border-radius: 8px;
            font-weight: 600;
            padding: 10px 20px;
            height: auto;
        }

        .btn-primary-theme {
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
            border: none;
            color: white;

            &:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
            }
        }

        .btn-danger-theme {
            background: #ef4444;
            border: none;
            color: white;

            &:hover {
                background: #dc2626;
            }
        }

        .btn-secondary {
            background: #fff;
            border: 1px solid #e2e8f0;
            color: #475569;

            &:hover {
                background: #f8fafc;
                color: #1e293b;
            }
        }
    }
}
</style>
